<template>
  <div class="template">
    <div class="button-style">
      <el-button
        type="primary"
        size="mini"
        @click="queryResultData"
      >
        <TcAwesomeIcon name="refresh" />
        <span class="refresh-label">刷新</span>
      </el-button>
    </div>
    <div class="table-style">
      <el-table
        :data="showData"
        height="100%"
        row-key="key"
        size="mini"
        border
        :header-cell-style="{background:'#E2EBF0',color: '#000'}"
        style="width: 100%"
        :tree-props="{children: 'point'}"
      >
        <el-table-column
          prop="type"
          align="center"
          label="资源类型"
          width="120px"
        />
        <el-table-column
          prop="name"
          align="center"
          label="资源名称"
          min-width="140px"
        />
        <el-table-column
          prop="check_account"
          label="审核人"
          align="center"
          min-width="80px"
        />
        <el-table-column
          prop="seg_name"
          label="审核环节"
          align="center"
          min-width="80px"
        />
        <el-table-column
          prop="check_date"
          label="审核时间"
          align="center"
          min-width="80px"
        />
        <el-table-column
          prop="is_check"
          align="center"
          label="是否通过"
          min-width="80px"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.is_check === undefined"
              class="no-audit"
            >
              未审核
            </span>
            <span
              v-else-if="scope.row.is_check === '1'"
              class="pass"
            >
              通过
            </span>
            <span
              v-else-if="scope.row.is_check === '0'"
              class="no-pass"
            >
              未通过
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="check_reason"
          align="center"
          label="审核意见"
          min-width="180px"
        />
      </el-table>
    </div>
    <div class="pagination-style">
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        small
        background
        layout="prev, pager, next, total, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
// import _ from 'lodash';
import { queryResults } from '@/api/service/gisShow2020';

export default {
  name: 'AuditTable',
  props: {
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
    resData: {
      type: Object,
      default: () => {},
    },
    // total: {
    //   type: Number,
    //   default: 100,
    // },
    isTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      auditTable: [],
      currentPage: 1,
      // 表格原始数据
      tableData: [],
      // 表格展示数据
      showData: [],
      // 表格每页条数
      pageSize: 20,
      // 总条数
      total: 0,
    };
  },
  watch: {
    resData() {
      if (this.planId !== '') {
        this.queryResultData();
      }
    },
    isTable() {
      if (this.isTable) {
        this.queryResultData();
      } else {
        console.log('关闭表格页面');
      }
    },
  },
  mounted() {
    if (this.planId !== '') {
      this.queryResultData();
    }
  },
  methods: {
    async queryResultData() {
      const that = this;
      const result = await queryResults(that.planId);

      that.initTableData(that.resData);
      that.auditTable = [];
      if (result.data.success) {
        that.tableData.forEach((res) => {
          const pointArr = [];
          if (res.point && res.point.length && res.point.length > 0) {
            res.point.forEach((pointdata) => {
              const resPoint = pointdata;
              for (let index = 0; index < result.data.data.length; index += 1) {
                const element = result.data.data[index];
                if (element.resource_id === resPoint.id) {
                  resPoint.check_account = element.modify_account === '' ? element.check_account : element.modify_account;
                  resPoint.check_date = element.check_date;
                  resPoint.seg_name = element.seg_name;
                  resPoint.is_check = element.is_check || '';
                  resPoint.check_reason = element.check_reason;
                }
              }
              pointArr.push(resPoint);
            });
          }
          const resTable = res;
          for (let index = 0; index < result.data.data.length; index += 1) {
            const element = result.data.data[index];
            if (element.resource_id === resTable.id) {
              if (pointArr.length > 0) {
                resTable.check_account = element.modify_account === '' ? element.check_account : element.modify_account;
                resTable.check_date = element.check_date;
                resTable.seg_name = element.seg_name;
                resTable.is_check = element.is_check || '';
                resTable.check_reason = element.check_reason;
                resTable.point = pointArr;
              } else {
                resTable.check_account = element.modify_account === '' ? element.check_account : element.modify_account;
                resTable.check_date = element.check_date;
                resTable.seg_name = element.seg_name;
                resTable.is_check = element.is_check || '';
                resTable.check_reason = element.check_reason;
              }
            }
          }
          that.auditTable.push(resTable);
        });
      }
      this.$emit('audit-info', this.auditTable);
      this.setPage(this.auditTable, this.currentPage);
      // console.log(that.auditTable);
    },
    // 前台分页效果
    setPage(table, currentPage) {
      if (table.length > 0) {
        this.showData = [];
        const start = Number((currentPage - 1) * this.pageSize + 1);
        const endnum = Number(currentPage * this.pageSize);
        const end = endnum > this.total ? this.total : endnum;
        for (let index = start - 1; index < end; index += 1) {
          this.showData.push(table[index]);
        }
        console.log(this.showData);
      }
    },
    // 后台数据返回处理
    initTableData(resObj) {
      this.total = 0;
      this.tableData = [];
      if (resObj.guanglanxitong) {
        this.total += resObj.guanglanxitong.length;
        resObj.guanglanxitong.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.guandaoxitong) {
        this.total += resObj.guandaoxitong.length;
        resObj.guandaoxitong.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.ganluxitong) {
        this.total += resObj.ganluxitong.length;
        resObj.ganluxitong.forEach((resArr) => {
          const point = [];

          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.zhimaixitong) {
        this.total += resObj.zhimaixitong.length;
        resObj.zhimaixitong.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.yinshangxitong) {
        this.total += resObj.yinshangxitong.length;
        resObj.yinshangxitong.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.guaqiangxitong) {
        this.total += resObj.guaqiangxitong.length;
        resObj.guaqiangxitong.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
      if (resObj.other) {
        this.total += resObj.other.length;
        resObj.other.forEach((resArr) => {
          const point = [];
          if (resArr.point && resArr.point.length && resArr.point.length > 0) {
            resArr.point.forEach((res) => {
              point.push({
                id: res.id,
                key: resArr.id + res.id,
                name: res.name,
                type: res.typecn,
                typeEn: resArr.typeen,
                is_check: '',
              });
            });
          }

          if (point.length > 0) {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
              point,
            });
          } else {
            this.tableData.push({
              id: resArr.id,
              key: resArr.id,
              name: resArr.name,
              type: resArr.typecn,
              typeEn: resArr.typeen,
              is_check: '',
            });
          }
        });
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.setPage(this.auditTable, val);
    },
  },
};
</script>
<style lang="scss" scoped>
.template{
  width: 100%;
  height: 100%;
  .button-style{
    text-align: right;
    padding: 8px 10px 8px 40px;
    .refresh-label{
      padding-left: 6px;
    }
  }
  .table-style{
    height: calc(100% - 108px);
    margin: 0 10px;
    border: 1px solid #ccc;
    .pass{
      color: #10db60;
    }
    .no-pass{
      color: #ff5137;
    }
    .no-audit{
    }
  }
  .pagination-style{
    padding-top: 18px;
    text-align: right;
    padding-right: 20px;
  }
  /deep/ .el-pagination__jump{
    margin-left: 4px;
  }
}
</style>
